<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <el-form label-width="200px" v-if="dataInfo">
        <div class="tit">
          <h2>基础信息</h2>
          <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
        <el-row>
          <el-form-item label="规格名称:">
            <span>{{ dataInfo.specName }}</span>
          </el-form-item>
          <el-form-item label="规格类型:">
            <span>{{ formatSpecType(dataInfo.specType) }}</span>
          </el-form-item>
          <el-form-item label="规格单位:">
            <span>{{ dataInfo.fieldName }}</span>
          </el-form-item>
          <el-form-item label="规格描述:">
            <span>{{ dataInfo.fieldOptions }}</span>
          </el-form-item>
          <el-form-item label="规格值:">
            <span>{{ specValList }}</span>
          </el-form-item>
        </el-row>

      </el-form>
    </div>
  </div>
</template>

<script>
  import SpecApi from '@/api/goods/spec';

export default {
  data() {
    return {
      dataInfo: {},
    };
  },
  computed: {
    specValList(){
      const {specValList} = this.dataInfo
      if(specValList){
        return specValList.map(item=>item.specVal).join("、")
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      SpecApi.getSpecInfo({ id: this.$route.query.id }).then(res => {
        this.dataInfo = res.data

      })
    },
    formatSpecType(cellValue) {
      if (cellValue === 1) {
        return '产品'
      } else if (cellValue === 2) {
        return '公共'
      }
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: '/goods/specManagement' })
    }
  },

}

</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>

<style lang="scss" scoped>
.img-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: 3px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;

  .el-image{
    width: 100%;
    &::v-deep img{
      height:auto
    }
  }
}
</style>
